<template>

  <SelectGrade v-on:sendGrade="getGrade"/>

  <div class="title">
    练习时间：<span style="color:red">{{timeConsuming}}</span>
    正确：<input>
    错误：<input>
  </div>

  <Unit ref="unitVc"></Unit>
  
  <div>
   
    <div style="float: right;margin-right: 50px;margin-top: 10px;">
      <el-button @click="startGame" :type="buttonType" round>{{ flag }}</el-button>
    </div>

    <div style="height:50px">
      <Show v-show="flag !== '开始'"/>
    </div>
  </div>
 
</template>

<script>
import {ref,computed, onMounted} from 'vue'

import SelectGrade from './SelectGrade.vue'
import Show from './Show.vue'
import Unit from './Unit.vue'

export default {
  name:'Title',
  components:{SelectGrade,Show,Unit},
  setup(props,context){
    let flag = ref('开始')
    let gameTimes = ref(0)
    let time = '';
    let timeConsuming = '';
    let buttonType = ref('success')
    let unitVc = ref(null); //本质是reactive({value:null})


    function startGame(){
      if(flag.value === '开始'){
        start()
      }else{
        pause()
      }
    }

    function start(){
      flag.value = '暂停'
      buttonType.value = 'danger'
      time = setInterval(() => {
        gameTimes.value ++
      }, 1000);
      console.log(flag)
    }

    function pause(){
      clearInterval(time)
      flag.value = '开始'
      buttonType.value = 'success'
      console.log(flag)
    }

    timeConsuming = computed(()=>{

      let seconds = gameTimes.value % 60
      let minute = parseInt(gameTimes.value / 60 % 60)
      let hour = parseInt(gameTimes.value / 3600)

			return hour +'时'+ minute + '分'+ seconds + '秒'
			})

      function getGrade(id){
        console.log('得到的年级Id',unitVc.value)
        
        // 调用unit组件中的getWord方法
        unitVc.value.getWord(id[1])
        
      }

    return{
      flag,
      timeConsuming,
      startGame,
      buttonType,
      getGrade,
      unitVc
    }
  }

}
</script>

<style scoped>
  .title{
    text-align: center;
  }
</style>